misc.astro

---
import SettingsCard from "@components/settings/SettingsCard.astro";
import Toast from "@components/toasts/Toast.svelte";
import ToastWrapper from "@components/toasts/ToastWrapper.svelte";
import Layout from "@layouts/Layout.astro";
import SettingsLayout from "@layouts/SettingsLayout.astro";
import SettingsSection from "@layouts/SettingsSection.astro";
import { getLangFromUrl, useTranslations } from "../../../i18n/utils";

const origin = Astro.url.origin;
const lang = getLangFromUrl(Astro.url);
const t = useTranslations(lang);
---

<Layout title="Settings">
  <SettingsLayout title="Miscellaneous">
  <SettingsSection title="Misc" subtitle="All of our miscellaneous settings">
    <div class="w-full h-full flex flex-col items-center justify-center flex-wrap md:flex-row md:items-start md:justify-start gap-4">
        <SettingsCard 
            title="Language"
            description="Choose your language"
            input={{input:false}}
            button={{name: 'Change Language', id: 'setlang'}}
            select={{
                select: true,
                name: 'lang',
                options: [
                    {name: 'English', value: 'en_US', disabled: false},
                    {name: 'Japanese', value: 'jp', disabled: false},
                ]
            }}
            both={{enabled: false}}
        />
        <SettingsCard
            title="Reset instance"
            description="Reset your instance if your having troubles or problems."
            input={{ input: false }}
            button={{ name: 'Reset', id: 'resetinstance' }}
            select={{ select: false }}
            both={{ enabled: false }}
        />
    </SettingsSection>
  </SettingsLayout>
 <script>
    import { EventHandler } from "@utils/events";
    import { navigate } from "astro:transitions/client";
    import { defaultStore } from "@utils/storage";
    import { SettingsVals } from "@utils/values";
    import { Elements } from "@utils/index";

    const handler = async () => {
        const els = Elements.select([
            { type: 'id', val: 'lang' },
            { type: 'id', val: 'setlang' },
            { type: 'id', val: 'resetinstance' }
        ]);
        const lang = defaultStore.getVal(SettingsVals.i18n.lang);
        const val = Elements.exists<HTMLSelectElement>(await els.next());
        const button = Elements.exists<HTMLButtonElement>(await els.next());
        val.value = lang || "en_US";
        Elements.attachEvent(button, "click", () => {
            defaultStore.setVal(SettingsVals.i18n.lang, val.value);
            navigate(`${window.location.origin}/${val.value}/settings/misc`);
        });

        const resetButton = Elements.exists<HTMLButtonElement>(await els.next());
        Elements.attachEvent(resetButton, "click", async () => {
            const t = await navigator.serviceWorker.getRegistrations();
            t.map(async (reg) => {
                await reg.unregister();
            });
            localStorage.clear();
            window.location.href = "/";
        });
    }

    new EventHandler({
        events: {
            "astro:page-load": handler
        },
        logging: false
    })
    .bind();
</script>